<template>

<div class="goos-list">



    <!-- api -->
    <!-- 方式1 使用 a标签 的形式叫做 标签跳转 -->
     <!-- <router-link class="goods-item" v-for="item in goodsList" :key="item.id" 
     to="'/home/goodsinfo/'+item.id">
        <img :src="item.img_url" alt="">
    <h1 class="title">{{ item.title }}</h1>
    <div class="info">
        <p class="price">
            <span class="now">￥{{ item.sell_price }}</span>
            <span class="old">${{ item.market_price }}</span>
        </p>
        <p class="show" >
            <span>热卖中</span>
            <span>{{ item.stock_quantity }}</span>
        </p>
    </div>
    </router-link> -->


    <!-- 网页中 有两种跳转方式 -->
    <!-- 方式1 使用 a标签 的形式叫做 标签跳转 -->
    <!-- 方式2 使用 window.laction.href 的形式 叫做编程导航 -->
    


    <!-- 方式2 使用 js 方式进行路由导航 -->
    <!-- <router-link class="goods-item" v-for="item in goodsList" :key="item.id" 
     @click="goDetail(item.id)">
        <img :src="item.img_url" alt="">
    <h1 class="title">{{ item.title }}</h1>
    <div class="info">
        <p class="price">
            <span class="now">￥{{ item.sell_price }}</span>
            <span class="old">${{ item.market_price }}</span>
        </p>
        <p class="show" >
            <span>热卖中</span>
            <span>{{ item.stock_quantity }}</span>
        </p>
    </div>
    </router-link> -->





    <router-link class="goods-item" to="/home/goodsinfo/1">
        <img src="http://img5.imgtn.bdimg.com/it/u=3410731144,2907194645&fm=26&gp=0.jpg" alt="">
    <h1 class="title">诚信买卖 你买外卖</h1>
    <div class="info">
        <p class="price">
            <span class="now">￥1999</span>
            <span class="old">$3999</span>
        </p>
        <p class="show" >
            <span>热卖中</span>
            <span>甚于 ？？？ 件</span>
        </p>
    </div>
    </router-link>

    <router-link class="goods-item" to="/home/goodsinfo/1">
        <img src="http://img5.imgtn.bdimg.com/it/u=3410731144,2907194645&fm=26&gp=0.jpg" alt="">
    <h1 class="title">诚信买卖 你买外卖</h1>
    <div class="info">
        <p class="price">
            <span class="now">￥1999</span>
            <span class="old">$3999</span>
        </p>
        <p class="show" >
            <span>热卖中</span>
            <span>甚于 ？？？ 件</span>
        </p>
    </div>
    </router-link>

    <router-link class="goods-item" to="/home/goodsinfo/1">
        <img src="http://img5.imgtn.bdimg.com/it/u=3410731144,2907194645&fm=26&gp=0.jpg" alt="">
    <h1 class="title">诚信买卖 你买外卖</h1>
    <div class="info">
        <p class="price">
            <span class="now">￥1999</span>
            <span class="old">$3999</span>
        </p>
        <p class="show" >
            <span>热卖中</span>
            <span>甚于 ？？？ 件</span>
        </p>
    </div>
    </router-link>
   




    <mt-button type="danger" size="large" @click="getlist">查看更多</mt-button>

</div>

</template>

<script>
export default {
    data(){
        return {
            // 默认获取商品 显示第一页
            pageindex:1,
            goodsList:[ //获取 goodspurchased 的全部商品数据

            ]
        }
    },
    created(){
        //页面初始化 就调用这个方法
        this.getGodsList()
    },
    methods:{
        // 方式1 使用 a标签 的形式叫做 标签跳转
        getGodsList(){ //获取商品栏
            // this.$http.get("api/getgoods?pageindex=" + this.pageindex).then(result => {
            //     if(result.body.status === 0){
            //         // 将新的数据 拼接旧的数据 显示在页面上
            //         this.goodsList = this.goodsList.concat(result.body.status);
            //     }
            // })
        },
        //注册了点击事件 点击查看更多  就执行以下代码
        getlist(){
            //让默认的 商品页 ++
            this.pageindex++;
            //点击按钮后 因为默认商品页 ++ 了 所以再次调用 会前一页跟后一页拼接
            this.getGodsList();
        },


        //方式2 使用 js 方式进行路由导航
        // 使用 js形式 进行路由导航
        goDetail(id){
            //除了<router-link> 创建a标签来定义导航链接 我们还可以借组router 的实例方法 通过编写代码来实现

            //其中：一定要区分 this.$route 和 this.$router 这两个对象
            //其中 this.$route 是路由参数对象 所有路由的参数 params query 都属于它
            //     this.$router 是一个路由导航对象 用它 可以方便的使用 js代码 实现路由的
            // 前进 和后推 跳转到新的URl

            //1.最简单的方法
            // this.$router.push("/home/goodsinfo/1")
            // //2.传递对象
            // this.$router.push({path:"/home/goodsinfo/" + id})
            // //3.传递命名的路由
            // this.$router.push({name:"goodsinfo",params:{id}})

        }
    } 
}
</script>

<style lang="scss" scoped>
    .goos-list {
        display: flex;
        // 超出 强行换行
        flex-wrap: wrap;
        padding: 0 10px;
        justify-content: space-between;
        .goods-item {
            width: 48%;
            border: 2px solid #ccc;
            box-shadow: 0 0 10px #ccc;
            margin-top: 10px;
            img{
                width: 100%;
            }
            .title{
                font-size: 15px;
            }
            .info {
                background-color: #eee;
                .price{
                    .now{
                        color: red;
                        font-weight: bold; 
                        font-size: 16px;
                    }
                    .old{
                        text-decoration: line-through;
                        font-size: 14px;
                        margin-left: 20px;
                    }
                }
                .show{
                    display: flex;
                    justify-content: space-between;
                }
                

            }
        }
        .mint-button-text{
            width: 100%;
        }
    }
</style>
